import "./AddBill.css"
import type { FormProps } from 'antd';
import { Button, Select, Form, Input, DatePicker, Space } from 'antd';
import { history, Link } from "umi";
import { useState } from "react";

export default function AddBill() {
  // 时间选择器
  const { RangePicker } = DatePicker;
  // 文本框
  const { TextArea } = Input;
  const [value, setValue] = useState('');
  type FieldType = {
    billName?: string;  // 账单名称
    payItem?: string;  // 收费项目
    unitCost?: string;  // 费用单价
    formula?: string;  // 计算公式
    measureUnit?: string; // 计量单位
    computationalAccuracy?: string; // 计算精度
    overdueFineRatio?: string; // 滞纳金比例
    ambitOfCharges?: string; // 收费范围
    startDate?: string; // 起止日期
    remark?: string; // 备注
  };

  // 验证成功
  const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
    console.log('Success通过审核:', values);
    history.push("/bill");
  };

  // 验证失败
  const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  // 收费项目select
  const handleChangePayItem = (value: string) => {
    console.log(`selected ${value}`);
  };

  // 计量单位select
  const handleChangeMeasureUnit = (value: string) => {
    console.log(`selected ${value}`);
  };

  // 计算精度select
  const handleChangeComputationalAccuracy = (value: string) => {
    console.log(`selected ${value}`);
  }

  return (
    <div className="addBill">
      <span className="addBill-title">基本信息</span>
      <Form onFinish={onFinish} onFinishFailed={onFinishFailed} autoComplete="off"
        initialValues={{ payItem: "物业费", measureUnit: "平方米", computationalAccuracy: "分" }}
        className="addBill-form">

        <Form.Item<FieldType> label="账单名称" name="billName" rules={[{ required: true, message: '请输入账单名称！' }]}>
          <Input style={{ width: '95%' }} />
        </Form.Item>

        <Form.Item<FieldType> label="收费项目" name="payItem" rules={[{ required: true, message: '请输入收费项目！' }]}>
          <Select
            style={{ width: "95%" }}
            onChange={handleChangePayItem}
            options={[
              { value: '物业费', label: '物业费' },
              { value: '水费', label: '水费' },
              { value: '电费', label: '电费' },
              { value: '煤气费', label: '煤气费' },
            ]}
          />
        </Form.Item>

        <Form.Item<FieldType> label="费用单价" name="unitCost" rules={[{ required: true, message: '请输入费用单价！' }]}>
          <div style={{ display: "flex", justifyContent: "space-around", width: '100%' }}>
            <Input style={{ width: '95%' }} /> <span>元</span>
          </div>
        </Form.Item>

        <Form.Item<FieldType> label="计算公式" name="formula" rules={[{ required: true, message: '请输入计算公式！' }]} >
          <div style={{ display: "flex", justifyContent: "space-around", width: '100%' }}>
            <Input style={{ width: '95%' }} /> <span>元</span>
          </div>
        </Form.Item>

        <Form.Item<FieldType> label="计算单位" name="measureUnit" rules={[{ required: true, message: '请输入计算单位！' }]}>
          <Select
            style={{ width: "95%" }}
            onChange={handleChangeMeasureUnit}
            options={[
              { value: '平方米', label: '平方米' },
              { value: '度', label: '度' },
              { value: '平方', label: '平方' },
              { value: '升', label: '升' },
            ]}
          />
        </Form.Item>

        <Form.Item<FieldType> label="计算精度" name="computationalAccuracy" rules={[{ required: true, message: '请输入计算精度！' }]}>
          <Select
            style={{ width: "95%" }}
            onChange={handleChangeComputationalAccuracy}
            options={[
              { value: '分', label: '分' },
              { value: '元', label: '元' },
              { value: '角', label: '角' },
              { value: '分', label: '分' },
            ]}
          />
        </Form.Item>

        <Form.Item<FieldType> label="滞纳金比例" name="overdueFineRatio" rules={[{ required: true, message: '请输入滞纳金比例！' }]}>
          <Input style={{ width: '95%' }} suffix="%" />
        </Form.Item>

        <Form.Item<FieldType> label="收费范围" name="ambitOfCharges" rules={[{ required: true, message: '请输入收费范围！' }]}>
          <Input style={{ width: '95%' }} />
        </Form.Item>


        <Form.Item<FieldType> label="起止日期" name="startDate" rules={[{ required: true, message: '请选择起止日期！' }]}>
          <RangePicker style={{ width: "95%" }} />
        </Form.Item>

        <Form.Item<FieldType> label="备注" name="remark">
          <TextArea
            style={{ width: "95%" }}
            value={value}
            onChange={(e) => setValue(e.target.value)}
            placeholder="请输入"
            autoSize={{ minRows: 3, maxRows: 10 }}
            maxLength={100}
            showCount
          />
        </Form.Item>

        <Form.Item label={null} style={{ margin: "0 auto", width: "30%" }}>

          <div style={{ display: "flex", justifyContent: "space-around" }}>
            <Button type="primary" htmlType="submit">确定生成账单 </Button>
            <Button>
              <Link to="/Bill">返回</Link>
            </Button>
          </div>
        </Form.Item>
      </Form>
    </div>
  )
}
